<template>
	<view class="page">
		<!-- 	<view class="member-center" :style="{
			  backgroundImage: `url('${backgroundImage1}')`,
			  backgroundSize: '100% 100%',
			  height:'400rpx'
			}">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
			</view>
		</view> -->
		<view class="member-center">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#333" size="20"></up-icon>
			</view>
			<view class="fontSize-32 color-333 header-text">
				账户充值
			</view>
		</view>
		<view class="padding-30 box-sizing">
			<view class="borderRadius-30" style="background-color: #FAFAFA;">
				<view class="" style="border-bottom: 1px solid #EBEBEB;">
					<view class="fontSize-32 color-333 weight-700 box-sizing" style="padding: 20rpx 40rpx;">
						收款信息
					</view>
				</view>
				<view class="" style="padding: 20rpx 40rpx;">
					<view class="marginBottom-30" v-for="(item,index) in receive">
						<view class="fontSize-28 color-999">
							{{item.label}}
						</view>
						<view class="fontSize-28 color-333 marginTop-10">
								{{item.value}}
						</view>
					</view>
			<!-- 		<view class="marginBottom-30">
						<view class="fontSize-28 color-999">
							收款公司名
						</view>
						<view class="fontSize-28 color-333 marginTop-10">
							河南百霸网络科技有限公司
						</view>
					</view>
					<view class="marginBottom-10">
						<view class="fontSize-28 color-999">
							开户银行
						</view>
						<view class="fontSize-28 color-333 marginTop-10">
							中国建设银行股份有限公司郑州桐南支行
						</view>
					</view> -->

				</view>

			</view>
			<view class="borderRadius-30 marginTop-16" style="background-color: #FAFAFA;">
				<view class="" style="border-bottom: 1px solid #EBEBEB;">
					<view class="fontSize-32 color-333 weight-700 box-sizing" style="padding: 20rpx 40rpx;">
						汇款信息
					</view>
				</view>
				<view class="" style="padding: 20rpx 40rpx;">
					<view class="marginBottom-30">
						<view class="fontSize-28 color-999">
							汇款金额（元）
						</view>
						<view class="marginTop-10">
							<up-input placeholder="请输入金额" v-model="amount" border="none" color="#51D580"></up-input>
						</view>
					</view>
					<view class="marginBottom-30">
						<view class="fontSize-28 color-999">
							汇款凭证
						</view>
						<view class="marginTop-10 width-166 height-166" @click.stop="chooseImg"
							style="position: relative;">
							<image src="../../static/upload.png" mode="" class="width-166 height-166"
								v-if="pay_images == ''"></image>
							<view class="" v-else>
								<image :src="pay_images" mode="" class="width-166 height-166">
								</image>
								<image src="../../static/image/gb@2x.png" mode="" class="width-32 height-32 del-img"
									@click.stop="del"></image>
							</view>

						</view>
					</view>
					<view class="marginBottom-30">
						<view class="fontSize-28 color-999">
							汇款账号（选填）
						</view>
						<view class="marginTop-10">
							<up-input placeholder="为便于充值核算请填写您的汇款账号" v-model="pay_accoun" border="none"
								color="#51D580"></up-input>
						</view>
					</view>
					<view class="marginBottom-10">
						<view class="fontSize-28 color-999">
							汇款开户银行（选填）
						</view>
						<view class="marginTop-10">
							<up-input placeholder="请填写您的汇款开户银行" v-model="bank" border="none" color="#51D580"></up-input>
						</view>
					</view>

				</view>

			</view>

		</view>
		<view class="btn-section">
			<view class="btn" @click='sure'>
				确认充值
			</view>
			<view class="btn btn2" @click='toPage'>
				充值记录
			</view>
		</view>
		<up-popup :show="successShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					充值成功
				</view>
				<view class="text-center marginTop-100 fontSize-36 color-333">
					充值成功，您可以在充值记录 中查看相关记录
				</view>

				<view class="flex space-between items-center padding-30 marginTop-50">
					<view class="popupBtn" @click="clear">
						继续开通
					</view>
					<view class="popupBtn" @click="toPage" style="background: #51D580;">
						立即查看
					</view>
				</view>
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	const addRechargeApi = inject('addRecharge');
	const getFieldListApi = inject('getFieldList')
	const isOpen = ref(true)
	const bank = ref('')
	const pay_accoun = ref('')
	const pay_images = ref('')
	const amount = ref('')
	const $uploadHttp = inject('$uploadHttp');
	const receive=ref([])
	onLoad(() => {
		getFieldList()
	});

	const back = () => {
		uni.navigateBack()
	}
	const getFieldList = () => {
		getFieldListApi().then(res => {
			console.log(res)
			receive.value=res.receive
		})
	}
	const toMoney = () => {
		uni.navigateTo({
			url: '/pagesA/my/spreadBalance'
		})
	}
	const toPage = () => {
		uni.navigateTo({
			url: '/pagesA/my/rechargeRecord'
		})
	}
	const del = () => {
		pay_images.value = ''
	}
	const clear = () => {
		amount.value = ''
		pay_images.value = ''
		pay_accoun.value = ''
		bank.value = ''
	}

	const chooseImg = () => {
		uni.chooseImage({
			count: 1, //默认9
			success: function(res) {
				console.log(res, 90)
				const tempFilePaths = res.tempFilePaths;
				uni.uploadFile({
					url: $uploadHttp,
					filePath: tempFilePaths[0],
					name: 'file',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data));
						let data = JSON.parse(uploadFileRes.data)
						pay_images.value = data.data
					}
				});


			}
		});
	}

	const sure = () => {
		if (amount.value == '') {
			uni.showToast({
				title: '请输入金额',
				icon: 'none'
			})
			return
		}
		if (pay_images.value == '') {
			uni.showToast({
				title: '请上传凭证',
				icon: 'none'
			})
			return
		}
		
		addRechargeApi({
			amount: amount.value,
			pay_images: pay_images.value,
			pay_accoun: pay_accoun.value,
			bank: bank.value,
		}).then(res => {
			console.log(res,236)
			uni.showToast({
				title:'充值成功',
				icon: 'none'
			})
			setTimeout(() => {
			  		uni.redirectTo({
			  				url: '/pagesA/my/rechargeRecord'
			  		})
			}, 1500)
	
		})
	}
</script>
<style lang="scss" scoped>
	.member-center {
		width: 100%;
		height: 216rpx;
		background-color: #D4FDE2;
		padding-left: 32rpx;
		padding-right: 72px;
		box-sizing: border-box;
		position: relative;
		;
	}

	

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.header-text {
		position: absolute;
		left: 50%;
		top: 110rpx;
		transform: translateX(-50%);
	}

	.content {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -50rpx;
		z-index: 99;
	}

	.select {
		width: 144rpx;
		height: 72rpx;
		background: #D4FDE2;
		border-radius: 90rpx 90rpx 90rpx 90rpx;
		margin-right: 20rpx;
		text-align: center;
		line-height: 72rpx;
		color: #2BC361;
	}

	.btn-section {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		background: #51D580;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		color: #fff;
		text-align: center;
		line-height: 104rpx;
		font-size: 32rpx;

	}

	.btn.btn2 {
		background: #fff;
		color: #999;
	}

	.del-img {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		.popupBtn {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx;
			text-align: center;
			line-height: 93rpx;
			color: #fff;
		}

	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>